<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button v-auth="'elderly_index_save'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">
          新增老人
        </el-button>
        <el-button
          v-auth="'elderly_index_remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds.map(Number))"
        >
          批量删除老人
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <el-button v-auth="'elderly_index_save'" type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">
          编辑
        </el-button>
        <el-button v-auth="'elderly_index_remove'" type="primary" link :icon="Delete" @click="oneDelete(scope.row)">
          删除
        </el-button>
      </template>
    </ProTable>
    <ElderlyDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="elderlyIndex">
import { ref, reactive } from "vue";
import { Elderly } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { getElderlyInfoList, saveElderlyInfo, deleteElderlyInfo } from "@/api/modules/elderly";
import { genderType, elderlyStatus, mobilityStatus } from "@/utils/dict";
import ElderlyDrawer from "@/views/care/elderly/components/ElderlyDrawer.vue";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 初始化请求参数
const initParam = reactive({});

// 数据处理回调
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total
  };
};

// 获取老人列表
const getTableList = (params: any) => {
  console.log(params);
  return getElderlyInfoList(params);
};

// 表格配置项
const columns = reactive<ColumnProps<Elderly.ResElderlyInfoList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "name",
    fixed: "left",
    label: "老人姓名",
    search: { el: "input" },
    width: 100
  },
  {
    prop: "nickName",
    label: "老人称呼",
    search: { el: "input" },
    width: 100
  },
  {
    prop: "mobilityStatus",
    label: " 能力等级",
    width: 160,
    enum: mobilityStatus,
    search: { el: "select", props: { filterable: true } }
  },
  {
    prop: "roomNumber",
    label: "房间号",
    search: { el: "input" },
    width: 90
  },
  { prop: "bedNumber", label: "床位号", width: 90 },
  {
    prop: "",
    label: "照护人员",
    width: 160,
    align: "center",
    render: scope => {
      return (
        <>
          {scope.row.elderlyCareWorkerList?.length == 0
            ? "--"
            : scope.row.elderlyCareWorkerList?.map((item: any) => (
                <el-tag type="primary" style="margin:0px 4px;">
                  {item.employeeName}
                </el-tag>
              ))}
        </>
      );
    }
  },
  { prop: "checkInDate", label: "入住日期", width: 120 },
  {
    prop: "status",
    label: "入住状态",
    width: 85,
    enum: elderlyStatus,
    search: { el: "select", props: { filterable: true } }
  },
  { prop: "emergencyContactName", label: "紧急联系人", width: 120 },
  { prop: "emergencyContactPhone", label: "紧急联系电话", width: 130 },
  { prop: "emergencyContactRelation", label: "紧急联系人关系", width: 145 },
  { prop: "notes", label: "备注", width: 160 },
  {
    prop: "idCard",
    label: "身份证号",
    width: 185
  },
  {
    prop: "dateOfBirth",
    label: "出生日期",
    width: 120
  },
  { prop: "chineseZodiac", label: "属相", width: 80 },
  {
    prop: "gender",
    label: "老人性别",
    enum: genderType,
    search: { el: "select", props: { filterable: true } },
    width: 70
  },
  { prop: "contactPhone", label: "联系电话", width: 150 },
  { prop: "address", label: "家庭地址", width: 160 },
  { prop: "createTime", label: "创建时间", width: 160 },
  { prop: "operation", label: "操作", fixed: "right", width: 300 }
]);

// 删除老人信息
const oneDelete = async (params: Elderly.ResElderlyInfoList) => {
  const reqParams: Elderly.ReqElderlyInfoDeleteParams = {
    id: [params.id]
  };
  await useHandleData(deleteElderlyInfo, reqParams, `删除老人信息`);
  proTable.value?.getTableList();
};

// 批量删除老人信息
const batchDelete = async (id: number[]) => {
  const reqParams: Elderly.ReqElderlyInfoDeleteParams = {
    id: id
  };
  await useHandleData(deleteElderlyInfo, reqParams, "删除所选老人信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof ElderlyDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Elderly.ResElderlyInfoList> = {}) => {
  if (row.avatarUrl == null) row.avatarUrl = "";
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? saveElderlyInfo : title === "编辑" ? saveElderlyInfo : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
